<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<base target="_blank">
	<title>盒子模型练习作业2</title>
	<style>
		  .box{
		  	   width:200px;
		  	   height:50px;
		  	   border:1px #999 solid;
		  	   text-align:center;
		  	   line-height:50px;
		  	   margin:50px auto;
		  	   color:pink;
		  }
		  .box:hover{
		  	   background:#999;
		  }
		  .box ul{
		  	list-style-type:none;
		  	width:100%;
		  	padding-left:0;
		  	margin:0 0 0 -1px;
		  	display:none;
		  }
		  .box ul li{
		  	width:100%;
		  	border:1px #999 solid;
		  }
		  .box ul li:hover{
		  	background:red;
		  }
		  .box:hover ul{
            display:block;
		  }
	</style>
</head>
<body>
	 <div class="box">
	 	菜单
	 	<ul>
	 		<li><a href="http://www.baidu.com">百度</a></li>
	 		<li><a href="http://www.taobao.com">淘宝</a></li>
	 		<li><a href="http://www.sina.com">新浪</a></li>
	 		<li><a href="http://www.tengxun.com">腾讯</a></li>
	 	</ul>
	 </div>
</body>
</html>